import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:xiaomishop/app/service/MyScreenExtention.dart';

import '../../../routes/app_pages.dart';
import '../controllers/good_search_controller.dart';

class GoodSearchView extends GetView<GoodSearchController> {
  const GoodSearchView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: _appBar(),
        body: ListView(
          padding: EdgeInsets.all(20.ww),
          children: [
            // _inputTextView(),
            _historyView(),
            _likeView(),
            _hotSearchView(),
          ],
        ));
  }

  _appBar() {
    return AppBar(
      //可以给appbar的title 给一个container
      actions: [
        TextButton(
            child: const Text("搜索", style: TextStyle(color: Colors.black)),
            onPressed: () {
              if (controller.keyword != null) {
                controller.saveSearchHistory(controller.keyword!);
              }
              Get.offAndToNamed(Routes.GOODLIST,
                  arguments: {"keyword": controller.keyword});
            })
      ],
      title: Container(
          width: 800.ww,
          alignment: Alignment.center,
          height: 120.ww,
          padding: EdgeInsets.only(left: 40.hh),
          decoration: BoxDecoration(
              color: Colors.black12, borderRadius: BorderRadius.circular(20)),
          child: TextField(
            onChanged: (value) {
              controller.keyword = value;
            },
            onSubmitted: (value) {
              if (controller.keyword != null) {
                controller.saveSearchHistory(controller.keyword!);
              }

              ///替换路由
              Get.offAndToNamed(Routes.GOODLIST,
                  arguments: {"keyword": controller.keyword});
            },
            style: TextStyle(fontSize: 36.ss),
            autofocus: true,
            decoration: InputDecoration(
                hintText: "请输入搜索商品",
                contentPadding: const EdgeInsets.all(0), //输入框上下居中
                border: OutlineInputBorder(
                  borderSide:
                  BorderSide(width: 1, color: Colors.red.withOpacity(0)),
                ),
                enabledBorder: OutlineInputBorder(
                  borderSide:
                  BorderSide(width:1, color: Colors.red.withOpacity(0)),
                ),
                focusedBorder: OutlineInputBorder(
                  borderSide:
                  BorderSide(width: 1, color: Colors.red.withOpacity(0)),
                ),
                errorBorder: OutlineInputBorder(
                  borderSide:
                  BorderSide(width: 1, color: Colors.red.withOpacity(0)),
                ),
                focusedErrorBorder: OutlineInputBorder(
                  borderSide:
                  BorderSide(width: 1, color: Colors.red.withOpacity(0)),
                ) //去掉下划线
            ),
            ///去除输入框边框
          )),

      backgroundColor: Colors.white,
      elevation: 0,
    );
  }

  ///搜索历史
  _historyView() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text("搜索历史", style: TextStyle(color: Colors.black)),
            IconButton(
                onPressed: () {
                  controller.clearSearchHistory();
                },
                icon: Icon(Icons.delete))
          ],
        ),
        Container(
            margin: EdgeInsets.fromLTRB(0, 20.hh, 0, 20.hh),
            child: Obx(() => Wrap(
                  spacing: 20.ww,
                  runSpacing: 20.ww,
                  alignment: WrapAlignment.start,
                  children: controller.searchHistorys.isEmpty
                      ? [Text("")]
                      : _historyListView(),
                )))
      ],
    );
  }

  //猜你想搜
  _likeView() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text("猜你想要", style: TextStyle(color: Colors.black)),
            Icon(Icons.delete)
          ],
        ),
        Container(
            margin: EdgeInsets.fromLTRB(0, 20.hh, 0, 20.hh),
            child: Wrap(
                spacing: 20.ww,
                runSpacing: 20.ww,
                alignment: WrapAlignment.start,
                children: [
                  Container(
                      child: Text("手机"),
                      padding: EdgeInsets.fromLTRB(40.ww, 15.hh, 40.ww, 15.hh),
                      decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(10.ww))),
                  Container(
                      child: Text("电脑"),
                      padding: EdgeInsets.fromLTRB(40.ww, 15.hh, 40.ww, 15.hh),
                      decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(10.ww))),
                  Container(
                      child: Text("笔记本"),
                      padding: EdgeInsets.fromLTRB(40.ww, 15.hh, 40.ww, 15.hh),
                      decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(10.ww))),
                  Container(
                      child: Text("路由器"),
                      padding: EdgeInsets.fromLTRB(40.ww, 15.hh, 40.ww, 15.hh),
                      decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(10.ww))),
                  Container(
                      child: Text("羽绒服"),
                      padding: EdgeInsets.fromLTRB(40.ww, 15.hh, 40.ww, 15.hh),
                      decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(10.ww))),
                  Container(
                      child: Text("电饭锅"),
                      padding: EdgeInsets.fromLTRB(40.ww, 15.hh, 40.ww, 15.hh),
                      decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(10.ww))),
                  Container(
                      child: Text("电风扇"),
                      padding: EdgeInsets.fromLTRB(40.ww, 15.hh, 40.ww, 15.hh),
                      decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(10.ww))),
                  Container(
                      child: Text("冰箱"),
                      padding: EdgeInsets.fromLTRB(40.ww, 15.hh, 40.ww, 15.hh),
                      decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(10.ww)))
                ]))
      ],
    );
  }

  //小米热搜
  _hotSearchView() {
    return Column(
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [Text("小米热搜", style: TextStyle(color: Colors.black))],
        ),
        Container(
            margin: EdgeInsets.only(top: 20.hh),
            padding: EdgeInsets.all(20.ww),
            decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(20.ww)),
            child: GridView.builder(
                itemCount: 10,
                ////本身不滚动，让父亲滚动
                physics: const NeverScrollableScrollPhysics(),
                ////收缩，让元素高度自适应，因为Gridview嵌套在Listview了，Gridview没有确定高度
                shrinkWrap: true,
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 2, //辅轴数量
                    crossAxisSpacing: 20.ww,
                    mainAxisSpacing: 20.hh,
                    mainAxisExtent: 160.hh),
                itemBuilder: (contxt, position) {
                  return Container(
                      color: Colors.white,
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: [
                          Container(
                              decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(5.ww),

                                  ///做圆角的图片，在BoxDecoration放一个image
                                  image: const DecorationImage(
                                      fit: BoxFit.cover,
                                      image: AssetImage(
                                          "assets/images/xiaomiBanner2.png"))),
                              width: 150.ww,
                              height: double.infinity),
                          Expanded(
                              flex: 1,
                              child: Container(
                                alignment: Alignment.topLeft,
                                padding: EdgeInsets.all(10.ww),
                                child: Text(
                                  "手机阿达阿达手机阿达阿达是的是的",
                                  style: TextStyle(fontSize: 30.ss),
                                ),
                              ))
                        ],
                      ));
                }))
      ],
    );
  }

  _inputTextView() {
    return Container(
        width: 800.w,
        height: 126.h,
        padding: EdgeInsets.only(left: 10.w),
        alignment: Alignment.center,
        decoration: BoxDecoration(
            color: Colors.red, borderRadius: BorderRadius.circular(26)),
        child: TextField(
          style: TextStyle(fontSize: 40.sp),
          autofocus: true,
          decoration: InputDecoration(
              contentPadding: const EdgeInsets.all(0), //输入框上下居中
              prefixIcon: Icon(Icons.search),
              border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(15.w),

                  ///输入框圆角
                  borderSide: const BorderSide(width: 1))),

          ///去除输入框边框
        ));
  }

  _historyListView() {
    return controller.searchHistorys
        .map(
          (value) => GestureDetector(
              onLongPress: () {
                _showActionSheet(value);
              },
              onTap: () {
                ///替换路由
                Get.offAndToNamed(Routes.GOODLIST,
                    arguments: {"keyword": value});
              },
              child: Container(
                  padding: EdgeInsets.fromLTRB(40.ww, 15.hh, 40.ww, 15.hh),
                  decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(10.ww)),
                  child: Text(value))),
        )
        .toList();
  }

  void _showActionSheet(value) {
    Get.defaultDialog(
        title: "提示信息!",
        middleText: "您确定要删除吗?",
        confirm: ElevatedButton(
            onPressed: () {
              print("确定");
              controller.deleteSearchHistory(value);
              Get.back();
            },
            child: const Text("确定")),
        cancel: ElevatedButton(
            onPressed: () {
              Get.back();
            },
            child: const Text("取消")));
  }
}
